<template>
  <div>
    <el-button @click="addFile" type="hollow" size="mini" class="add-button">追加</el-button>
    <el-dialog title="上传" :visible.sync="showUpload" :hideClose="true" @onClose="onClose">
      <div class="file-upload-box">
        <wrapUploader @info="info" @succeedOver="succeedOver" @mergeMature="mergeMature" :type="type" :taskId="path"
          :biz_id="biz_id" :relative_path="relative_path" :succeed="uploadSucceed" v-if="showUpload">
        </wrapUploader>
      </div>
      <span slot="footer" class="dialog-footer">
        <div id="dialog-footer-hint">关闭弹框后会导致剩余数据传输失败</div>
        <el-button class="none-type" @click="onClose">结束传输</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>

export default {
  name: "FileList",
  data() {
    return {
      showUpload: false,
      path: '',
      infoData: {}
    };
  },
  watch: {
    taskId(val) {
      console.log(val)
      this.path = val
    }
  },
  props: ['type', 'relative_path', 'biz_id', 'uploadSucceed'],
  async created() {
    this.path = this.taskId
  },
  methods: {
    onClose() {
      this.showUpload = false
      this.$emit('info', this.infoData)
      this.$emit('succeedOver', this.infoData)
    },

    addFile() {
      this.showUpload = true;
    },

    info(data) {
      this.infoData = data
    },

    succeedOver(data) {
      this.succeedOverData = data
    },

    mergeMature(data) {
      console.log(data)
    }
  },
};
</script>

<style scoped>
.dialog-footer {
  position: relative;
  display: block;
  width: 100%;
}

#dialog-footer-hint {
  position: absolute;
  left: 0;
  top: 0;
}

.add-button {
  color: #B8C2E5;
  background: #333B54;
  border-color: #4A567E;
  margin-top: 5px;

  &:hover {
    background: #333B54;
    border-color: #4A567E;
  }
}
</style>